<template>
    <el-dialog
        :append-to-body="true"
        v-model="visible"
        title="相关概览"
        width="800"
    >
        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="ida"
            border
            default-expand-all
        >
            <el-table-column prop="node" label="节点" sortable>
                <template #default="{ row }">
                    <span
                        :class="[
                            {
                                'current-item':
                                    `${props.modalType}_${props.ID}` == row.ida,
                            },
                        ]"
                        >{{ row.node }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column prop="num" label="编号" sortable />
            <el-table-column prop="status" label="状态" sortable width="80">
                <template #default="{ row }">
                    {{
                        statusObj[row.type]
                            ? statusObj[row.type][row.status] || row.status
                            : row.status
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="UpdatedAt" label="更新时间" sortable>
                <template #default="{ row }">
                    {{ formatDate(row.UpdatedAt) }}
                </template>
            </el-table-column>
            <el-table-column prop="action" label="操作" width="80">
                <template #default="{ row }">
                    <el-button type="primary" link @click="toDetail(row)"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { defineProps, computed, defineEmits, watch, onMounted, ref } from "vue";
import { getAssociationList } from "@/api/plmSbuProjects";
import { formatDate } from "@/utils/format";
import { useRouter } from "vue-router";

const emits = defineEmits(["update:dialogVisible"]);
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
    projectNum: {
        type: String,
        default: undefined,
    },
    styleNum: {
        type: String,
        default: undefined,
    },
    //project ：项目;productStyles ：款式资讯;productSpec ：产品规格;ddmsSpecDrawing ：规格设计图;moldStartNotice ：起模通知单;firstOrderProcessing ：首办单;largeScaleOrder ：大办单;masterBOM ：Master
    modalType: {
        type: String,
        default: "project",
        required: true,
    },
    ID: {
        default: 0,
        required: true,
    },
});

// 路由
const router = new useRouter();

const visible = computed({
    get() {
        return props.dialogVisible;
    },
    set(val) {
        emits("update:dialogVisible", val);
    },
});

// url 对象
const urlObj = ref({
    project: "/layout/plmSbuProjectsView",
    productStyles: "/layout/ProductStylesView",
    productSpec: "/layout/productSpecAdd",
    ddmsSpecDrawing: "/layout/ddmsSpecDrawingView",
    moldStartNotice: "/layout/moldStartNoticeAdd",
    firstOrderProcessing: "/layout/firstOrderProcessingEdit",
    largeScaleOrder: "/layout/plmLargeOrderProcessingEdit",
    masterBOM: "/layout/masterBOMAdd",
});
// 状态
const statusObj = ref({
    project: {
        0: "草稿",
        1: "已确认",
    },
    productStyles: {
        0: "草稿",
        1: "已确认",
    },
    productSpec: {
        0: "草稿",
        1: "已确认",
    },
    ddmsSpecDrawing: {
        0: "草稿",
    },
    moldStartNotice: {
        0: "草稿",
    },
    masterBOM: {
        0: "草稿",
    },
});

const tableData = ref([
    // {
    //     id: 1,
    //     node: "项目",
    //     num: "DP006223",
    //     name: "草稿",
    //     UpdatedAt: "2016-05-02",
    //     children: [
    //         {
    //             id: 2,
    //             node: "款式资讯",
    //             num: "DP006223",
    //             date: "2016-05-01",
    //             name: "草稿",
    //             children: [
    //                 {
    //                     id: 3,
    //                     node: "产品规格",
    //                     num: "DP006223",
    //                     date: "2016-05-01",
    //                     name: "草稿",
    //                 },
    //                 {
    //                     id: 4,
    //                     node: "规格设计图",
    //                     num: "DP006223",
    //                     date: "2016-05-01",
    //                     name: "草稿",
    //                 },
    //             ],
    //         },
    //         {
    //             id: 5,
    //             node: "款式资讯",
    //             num: "DP006223",
    //             date: "2016-05-01",
    //             name: "草稿",
    //         },
    //     ],
    // },
]);

// 获取相关信息
const getAssociationListFun = () => {
    let params = {
        projectNum: props.projectNum,
        styleNum: props.styleNum,
    };
    tableData.value = [];
    getAssociationList(params).then((res) => {
        if (res.code == 0) {
            tableData.value.push({
                ida: "project" + "_" + res.data.ID,
                ID: res.data.ID,
                type: "project",
                node: "项目",
                num: res.data.projectNum,
                status: "1",
                UpdatedAt: res.data.UpdatedAt,
                children: [],
            });
            res.data.productStyles.forEach((item1) => {
                // 款式
                let styleItem = {
                    ida: "productStyles" + "_" + item1.ID,
                    ID: item1.ID,
                    type: "productStyles",
                    node: "款式资讯",
                    num: item1.styleNum,
                    status: item1.status,
                    UpdatedAt: item1.UpdatedAt,
                    children: [],
                };
                // 产品规格
                let productSpec = null;
                if (item1.productSpec.ID != 0) {
                    productSpec = {
                        ida: "productSpec" + "_" + item1.productSpec.ID,
                        ID: item1.productSpec.ID,
                        type: "productSpec",
                        node: "产品规格",
                        num: item1.styleNum,
                        status: item1.productSpec.status,
                        UpdatedAt: item1.productSpec.UpdatedAt,
                    };
                    styleItem.children.push(productSpec);
                }
                // 规格设计图 --- 多个规格图
                if (item1.ddmsSpecDrawing) {
                    let ddmsSpecDrawingList = item1.ddmsSpecDrawing.map((d) => {
                        return {
                            ida: "ddmsSpecDrawing" + "_" + d.ID,
                            ID: d.ID,
                            type: "ddmsSpecDrawing",
                            node: "规格设计图",
                            num: d.productSpecNum,
                            status: d.status,
                            UpdatedAt: d.UpdatedAt,
                        };
                    });
                    styleItem.children =
                        styleItem.children.concat(ddmsSpecDrawingList);
                }
                // 起模通知单
                let moldStartNotice = null;
                if (item1.moldStartNotice&&item1.moldStartNotice?.ID != 0) {
                    moldStartNotice = {
                        ida: "moldStartNotice" + "_" + item1.moldStartNotice.ID,
                        ID: item1.moldStartNotice.ID,
                        type: "moldStartNotice",
                        node: "起模通知单",
                        num: item1.moldStartNotice.noticeNum,
                        status: item1.moldStartNotice.status,
                        UpdatedAt: item1.moldStartNotice.UpdatedAt,
                    };
                    styleItem.children.push(moldStartNotice);
                }
                // 首办单  -- 多个首办单
                if (item1.firstOrderProcessing) {
                    let firstOrderProcessingList =
                        item1.firstOrderProcessing.map((d) => {
                            return {
                                ida: "firstOrderProcessing" + "_" + d.ID,
                                ID: d.ID,
                                type: "firstOrderProcessing",
                                node: "首办单",
                                num: d.firstOrderNum,
                                status: d.status,
                                UpdatedAt: d.UpdatedAt,
                            };
                        });
                    styleItem.children = styleItem.children.concat(
                        firstOrderProcessingList
                    );
                }
                // 大办单
                if (item1.largeScaleOrder) {
                    let largeScaleOrderList = item1.largeScaleOrder.map((d) => {
                        return {
                            ida: "largeScaleOrder" + "_" + d.ID,
                            ID: d.ID,
                            type: "largeScaleOrder",
                            node: "大办单",
                            num: d.largeScaleNum,
                            status: d.status,
                            UpdatedAt: d.UpdatedAt,
                        };
                    });
                    styleItem.children =
                        styleItem.children.concat(largeScaleOrderList);
                }
                //  Master BOM
                let masterBOM = null;
                if (item1.masterBOM?.ID != 0) {
                    masterBOM = {
                        ida: "masterBOM" + "_" + item1.masterBOM.ID,
                        ID: item1.masterBOM.ID,
                        type: "masterBOM",
                        node: "Master BOM",
                        num: item1.masterBOM.masterBomNum,
                        status: item1.masterBOM.status,
                        UpdatedAt: item1.masterBOM.UpdatedAt,
                    };
                    styleItem.children.push(masterBOM);
                }
                tableData.value[0].children.push(styleItem);
            });
        }
    });
};

// 详情
const toDetail = (row) => {
    let url = urlObj.value[row.type];
    let query = {};
    switch (row.type) {
        case "productSpec":
            query["styleNum"] = row.num;
            query["subTitle"] = '产'+row.num
            break;
        case "moldStartNotice":
            query["ID"] = row.ID;
            query["isView"] = 1;
            break;
        case "firstOrderProcessing":
            query["id"] = row.num;
            query["subTitle"] = row.num;
            break;
        case "largeScaleOrder":
            query["id"] = row.num;
            query["subTitle"] = row.num;
            query["isView"] = true;
            break;
        case "masterBOM":
            query["ID"] = row.ID;
            query["isView"] = 1;
            break;
        default:
            query["id"] = row.ID;
            break;
    }
    if (!url) return;
    router.push({
        path: url,
        query,
    });
};

onMounted(() => {
    getAssociationListFun();
});
</script>

<style lang="scss" scoped>
.current-item {
    color: red;
}
</style>